<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .main {
        width: 600px;
        height: 600px;
        display: grid;
        grid-template-rows: repeat(3,100px);
        grid-template-columns: repeat(3,100px);

        /*grid-row-gap:10px ;每行间隔为10px 关键字row*/
        grid-row-gap:10px ;

        /* grid-column-gap: 20px;每列间隔设置为20px 关键字col*/
        grid-column-gap: 20px;

        /*行列间距的两种简写属性，第一个表示行，第二个表示列，如果只写一个系统默认是行列共用一个间距*/
        grid-gap: 10px 20px;
        gap: 10px ;

        /*定义区域，更细节化每个区域的样式*/
        /*单纯设置区域不会读页面有影响，需要后期修改*/
        /*如果区域不需要改动也可以用一个点.代替，放空*/
        grid-template-areas: 'header header header'
        'main main aside'
        'footer footer footer';

        /*改变容器放置位置，默认先行后列*/
        /*默认row先填充行  column先填充列*/
        /*dense填满之后再换行或者换列*/
        grid-auto-flow:row dense;

        /*容器属性设置，设置所有项目的样式*/
        /* justify-items: center;*/
        /*align-items: center;*/

        /*设置所有项目在容器之中的位置*/
        /*justify-content: center;*/
        /*align-content: center;*/

        /*设置自动延伸出来的行高和列宽*/
        grid-auto-columns: 100px;
        grid-auto-rows:100px ;
    }


    .text {
        width: 50px;
        height: 50px;
        background-color: red;
        line-height: 50px;
        text-align: center;
    }
    .one {
        /*设置从几行或者几列开始占*/
        /*grid-column-start: 1;*/
        /*grid-column-end: 3;*/
        /*跨越网格线的另一种span写法*/
        grid-column-start:span 2;
        background-color: lightskyblue;

    }
    .two {
        grid-column-start: 1;
        grid-column-end: 3;
        background-color: yellow;
        grid-row-end:3 ;
        grid-row-start:2 ;

        /*层级覆盖，默认为0*/
        z-index: 5;
    }
    .there {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 4;
        background-color: #0eee06;
        z-index: 3;
    }
    .nine {
        /*设置直接放在项目区域，后面跟着区域名*/
        /* 要先设置区域划分和区域名grid-template-areas*/
        grid-area: footer;
    }
    .five {
        /*self针对单个项目在单元格里面的排列位置*/
        justify-self: center;
        align-self: center;
    }
</style>
<body>
<div class="main">
    <div class="one text">1</div>
    <div class="two text">2</div>
    <div class="text there">3</div>
    <div class="text">4</div>
    <div class="text five">5</div>
    <div class="text">6</div>
    <div class="text">7</div>
    <div class="text">8</div>
    <div class="text nine">9</div>
</div>
</body>
</html>